<template>
  <div class="w-[100%] h-[100%]">

    <div class="mt-[0px]">
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="true" @query="handleSearchQuery"
                   :show-export="false"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <el-button type="primary" color="#3721FF" round @click="handleBtnClick({ type:'add' })">+
        新增
      </el-button>
      <el-button type="primary" color="rgba(55,33,255,0.08)"
                 @click="handleBtnClick({ type:'importArea' })" style="color:#3721FF" round>批量导入
      </el-button>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        pk="id"
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
        :show-expand="false"
      >

        <template #btn="scope">

          <div class="flex-center" v-style="`gap:10px`">
              <span v-for="(item, index) in tableBtnList" :key="index" v-style="`gap:10px`">
                <span
                  class="cursor-pointer"
                  :style="`color:${item.color}`"
                  v-if="item.code != 'more'"
                  @click="
                    handleBtnClick({
                      row: scope.row,
                      index: scope.$index,
                      code: item.code
                    })
                  "
                >
                  {{ item.name }}
                </span>


                 <el-dropdown placement="bottom"
                  v-if="item.code == 'more'"
                 >

                        <span
                          class="cursor-pointer"
                          :style="`color:${item.color}`"
                        >
                  {{ item.name }}
                </span>


                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item v-for="(it,idx) in toolip" :key="idx">
                            <template #default>
                              <text
                                :style="`color:${it.color}`"
                              > {{  it.name  }}</text>
                            </template>
                           </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>


                <span v-style="`color:#e7e7e7;margin-left:10px`"
                      v-if="index !== tableBtnList.length - 1"
                >|</span
                >
              </span>
          </div>

        </template>

      </QueryTable>

    </div>

    <ComfirmPops ref="ConfirmPropsRef" :type="'radio'" @confirm="getConfirmValue" title="新增"
                 :show-icon="false" width="537">
      <template #content>
        <InfoAction ref="InfoActionRef" :info="selectedRow"/>
      </template>
    </ComfirmPops>
  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import InfoAction from "./components/InfoAction.vue"
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import type {PurchaseAdvice} from "@/api/purchase/advice/type";
import {throttle, confirmPromote} from "@/utils";
import {GlobeStateRemoteApi} from "@/api/logistics/remoteArea";
import {useMessage} from "@/hooks/web/useMessage";

const message = useMessage();

const InfoActionRef = ref(null)
const ConfirmPropsRef = ref(null)

const searchList: TradeOrderQueryVO[] = [
  {
    label: '企业id',
    code: 'stateRemoteName',
    type: 'input'
  },
  {
    label: '企业名称',
    code: 'stateRemoteName',
    type: 'input'
  },
  {
    label: '企业账号',
    code: 'stateRemoteName',
    type: 'input'
  },
  {
    label: '企业套餐',
    code: 'stateRemoteName',
    type: 'input'
  },
  {
    label: '当前余额',
    code: 'stateRemoteName',
    type: 'numberRanger'
  },
]
const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '编辑'
  },
  {
    color: '#3721FF',
    code: 'edit',
    name: '详情'
  },
  {
    color: '#FF4E00',
    code: 'delItem',
    name: '禁用'
  },
  {
    color: '#3721FF',
    code: 'more',
    name: '更多'
  },
]);

const toolip = ref([
  {
    name: "消费记录",
    code: "item",
    color: "#999999"
  },
  {
    name: "流量明细",
    code: "flow",
    color: "#999999"
  },
  {
    name: "重置密码",
    code: "reset",
    color: "#999999"
  },
  {
    name: "删除",
    "code": "delItem",
    color: "#FF4E00"
  }
])


const th = ref([
  {
    name: '企业ID',
    code: 'stateName',
  },
  {
    name: '企业名称',
    code: 'stateRemoteName',
  },
  {
    name: '企业账号',
    code: 'stateRemoteName',
  },
  {
    name: '企业套餐',
    code: 'stateRemoteName',
  },
  {
    name: '席位数',
    code: 'stateRemoteName',
  },
  {
    name: '当前余额',
    code: 'stateRemoteName',
  },
  {
    name: '当前流量剩余',
    code: 'stateRemoteName',
  },
  {
    name: '过期时间',
    code: 'stateRemoteName',
  },
  {
    name: '当前状态',
    code: 'stateRemoteName',
  },
  {
    name: '创建者',
    code: 'stateRemoteName',
  },
  {
    name: '创建时间',
    code: 'stateRemoteName',
  },
  {
    name: '更新者',
    code: 'stateRemoteName',
  },
  {
    name: '更新时间',
    code: 'stateRemoteName',
  },
]);

const dataList = ref<PurchaseAdvice[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  getList();
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  add() {
    selectedRow.value = {}
    ConfirmPropsRef.value && ConfirmPropsRef.value.show();
  },
  edit({data}) {
    selectedRow.value = data.row;
    ConfirmPropsRef.value && ConfirmPropsRef.value.show();
  },
  delItem: throttle(async ({data}) => {
    await confirmPromote({
      content: "确认删除数据吗？"
    })

    await GlobeStateRemoteApi.deleteGlobeStateRemote(data.row.id);
    getList();

  }, 1000),
  importArea() {
    //TODO 批量导入
  }
}


const getConfirmValue = async () => {
  InfoActionRef.value && await InfoActionRef.value.confirm();
  // 刷新列表
  getList();
  message.success('操作成功');
  ConfirmPropsRef.value && ConfirmPropsRef.value.hide();
}
const getList = async () => {
  let res = await GlobeStateRemoteApi.getGlobeStateRemotePage(queryParams.value);
  dataList.value = res.list;
  total.value = res.total;
}

onMounted(() => {
  getList();
})

</script>
<style lang="scss" scoped>
:deep(.el-popper){
    width: 110px !important;
    margin-top: 10px;
}

</style>
